<template>
  <div>
    <el-row :gutter="24" style="margin-bottom: 20px" class="total">
      <el-col :span="6">
        <el-card shadow="always" class="in">
          <div class="fl">
            <p></p>
            <p style="font-weight: bold">订单数</p>
            <p>
              <span style="font-size: 20px"></span>
            </p>
          </div>
          <i class="el-icon-tickets ico"></i>
          <div class="clear"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="out">
          <div class="fl">
            <p></p>
            <p style="font-weight: bold">总运费</p>
            <p>
              <span style="font-size: 20px"></span>
            </p>
          </div>
          <i class="el-icon-money ico"></i>
          <div class="clear"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="allin">
          <div class="fl">
            <p></p>
            <p style="font-weight: bold">未开发</p>
            <p>
              <span style="font-size: 12px"></span>
            </p>
          </div>
          <i class="el-icon-date ico"></i>
          <div class="clear"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="allout">
          <div class="fl">
            <p></p>
            <p style="font-weight: bold">未开发</p>
            <p>
              <span style="font-size: 12px"></span>
            </p>
          </div>
          <i class="el-icon-coin ico"></i>
          <div class="clear"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mt">
      <el-col :span="12">
        <el-card>
          <el-timeline>
            <el-timeline-item timestamp="2024" placement="top">
              <el-card>
                <h4>更新</h4>
                <p>用户1提交</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024" placement="top">
              <el-card>
                <h4>更新</h4>
                <p>用户1提交</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024" placement="top">
              <el-card>
                <h4>更新</h4>
                <p>用户1提交</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024" placement="top">
              <el-card>
                <h4>更新</h4>
                <p>用户1提交</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024" placement="top">
              <el-card>
                <h4>更新</h4>
                <p>用户1提交</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 653.33px">
          <el-calendar v-model="date"> </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
    };
  },
};
</script>

<style lang="less" scoped>
.ico {
  float: right;
  font-size: 90px;
  color: rgba(255, 255, 255, 0.3);
}
.in {
  background: #4f88ff;
  &:hover {
    cursor: pointer;
    opacity: 0.8; //透明度
    transition: 0.5s; //动画过渡的更加顺滑
    transform: scale(1.1); //放大倍数
  }
}
.total {
  p {
    line-height: 30px;
    color: #fff;
    font-size: 16px;
  }
}
.allin {
  background: #5050ff;
  &:hover {
    cursor: pointer;
    opacity: 0.8; //透明度
    transition: 0.5s; //动画过渡的更加顺滑
    transform: scale(1.1); //放大倍数
  }
}
.allout {
  background: #f49b3b;
  &:hover {
    cursor: pointer;
    opacity: 0.8; //透明度
    transition: 0.5s; //动画过渡的更加顺滑
    transform: scale(1.1); //放大倍数
  }
}
.out {
  background: #f27075;
  &:hover {
    cursor: pointer;
    opacity: 0.8; //透明度
    transition: 0.5s; //动画过渡的更加顺滑
    transform: scale(1.1); //放大倍数
  }
}
.time p {
  color: #666;
}
</style>
